<script setup lang="ts">
import {useCartStore} from "@/stores/cartStore";
import {onMounted} from "vue";
import {authUtilStore} from "@/utils/authStore";
import {ElMessage} from "element-plus";
import {useUserStore} from "@/stores/userStore";

const cartStore = useCartStore()
const userInfo = useUserStore().userInfo
const authStore = authUtilStore();
// 初始化购物车
onMounted(async () => {
  await cartStore.fetchCart()
})
//立即支付
const submitPay = () => {
  if (userInfo.status==='2'){
    ElMessage.warning('你已被冻结，无法支付');
    return;
  }
  authStore.active = 1;
};
//返回首页
const goHome = () => {
  authStore.active = 0;
  window.location.href = "/";
};
</script>

<template>
  <div class="content-main">
    <div class="card-content">
      <!-- 头部标签 -->
      <div class="card-header">
        <div>商品信息</div>
        <div>单价</div>
        <div>数量</div>
        <div>小计</div>
        <div>操作</div>
      </div>
      <!-- 商品列表 -->
      <div class="item">
        <div v-if="!cartStore.cartStore.length" style="width: 100%;display: flex;justify-content: center;align-items: center;flex-direction: column">
          <el-empty :image-size="200" description="购物车还没有商品，赶紧选购吧"/>
          <el-button type="primary" @click="goHome">去逛逛</el-button>
        </div>
        <div v-else class="card-body" v-for="product in cartStore.cartStore" :key="product.id">
          <div class="card-item">
            <img :src="product.image" alt="商品图片" class="card-img">
            <el-text>{{ product.name }}</el-text>
          </div>
          <div>￥{{ product.sale_price.toFixed(2) }}</div>
          <div>
            <el-input-number @change="(val:number) => cartStore.updateQuantity(product.gooditemid, val)"
                             v-model="product.num"
                             :min="0"
                             size="default"/>
          </div>
          <div>￥{{ (product.sale_price * product.num).toFixed(2) }}</div>
          <div>
            <el-button @click="cartStore.removeItem(product.gooditemid)" plain type="danger" size="small" style="width: 60px;">删除
            </el-button>
          </div>
        </div>
      </div>
      <!-- 底部标签 -->
      <div class="card-footer" v-if="cartStore.cartStore.length">
        <button @click="cartStore.clearCart()" class="clear-cart">清空购物车</button>
        <div class="btn-group">
          总计：<span style="color: #e81414;font-size: 25px">￥{{ cartStore.getTotalPrice }}</span>
        </div>
        <button class="btn-primary" @click="submitPay">立即支付</button>
      </div>
    </div>
  </div>
</template>

<style scoped>
.clear-cart {
  background: orange;
  color: white;
  border: none;
  border-radius: 5px;
  padding: 10px 20px;
  font-size: 18px;
  cursor: pointer;
  margin-right: auto;
}

.btn-primary {
  background-color: #e81414;
  color: white;
  border: none;
  border-radius: 5px;
  padding: 10px 20px;
  font-size: 18px;
  cursor: pointer;
  margin: 0 30px;
}

.btn-group {
  font-weight: normal;
  font-size: 20px;
}

.card-footer {
  border-top: 1px solid blanchedalmond;
  padding-top: 10px;
  width: 100%;
  height: 50px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: end;
}

.item {
  width: 100%;
  max-height: 430px;
  overflow-y: auto;
}

.item::-webkit-scrollbar {
  width: 2px;
}

.item::-webkit-scrollbar-thumb {
  background-color: #696969;
}

.card-item {
  display: flex;
  flex-direction: row;
  align-items: center;
}

.card-img {
  width: 80px;
  height: 100px;
  margin-right: 20px;
}

.card-body {
  width: 100%;
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid #ccc;
}

.card-header {
  width: 100%;
  background-color: #eee;
  display: flex;
  flex-direction: row;
  padding: 10px 0;
  border-radius: 5px;
  margin-bottom: 10px;
}

.card-content {
  padding: 15px 20px;
  width: 90%;
  height: 540px;
  border-radius: 10px;
  box-shadow: 0 0 10px #ccc;
}

.card-header > div, .card-body > div {
  text-align: center;
}

.card-header > div:nth-child(1), .card-body > div:nth-child(1) {
  width: 36%;
  text-align: left;
  margin: 0 1%;
}

.card-header > div:nth-child(2), .card-body > div:nth-child(2) {
  color: #e81414;
  width: 12%;
  margin: 0 2%;
}

.card-header > div:nth-child(3), .card-body > div:nth-child(3) {
  width: 12%;
  margin: 0 2%;
}

.card-header > div:nth-child(4), .card-body > div:nth-child(4) {
  color: #e81414;
  width: 12%;
  margin: 0 2%;
}

.card-header > div:nth-child(5), .card-body > div:nth-child(5) {
  width: 12%;
  margin-left: 2%;
}

.content-main {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px 0;
}
</style>